﻿@model MoneyCounter.Models.UserMenuModel
@{
    ViewBag.Title = "Main menu";
    Layout = "~/Views/Shared/UserPageTemplate.cshtml";
    var checksCount = Model.ChecksCount.HasValue ? Model.ChecksCount.ToString() : "?";
}

<script>
    $(function () {
        $("#checkList").click(function () {
            window.location.href = "/ChecksList/ChecksList";
        });
        $("#settings").click(function () {
            window.location.href = "/ChecksList/UpdateSettings";
        });
        $("#about").click(function () {
            window.location.href = "/Account/About";
        });
        
        $(".tile").hover(
            function () {
                $('.brand .tile-bottom-border', this).show("slide", { direction: "down", effects: "easeOutBounce" }, 200);
            },
            function () {
                $('.brand .tile-bottom-border', this).hide("slide", { direction: "down" }, 'fast');
            }
        );
    });
</script>

<div class="page">
    <div class="page-header">
        <div class="page-header-content">
            <h2>Your personal menu</h2>
        </div>
    </div>

    <div class="page-region">
        <div class="page-region-content">
            <div id="checkList" class="tile bg-color-orange double outline-color-blue">
                <div class="brand">
                    <div class="name tile-font-strong">Tickets</div>
                    <div class="badge bg-color-orange">@checksCount</div>
                </div>
                
                <div class="brand">
                    <div class="tile-bottom-border"></div>
                </div>
            </div>
            

            <div id="settings" class="tile bg-color-blue outline-color-red">
                <div class="brand">
                    <div class="name tile-font-strong">Settings</div>
                </div>
                
                <div class="brand">
                    <div class="tile-bottom-border"></div>
                </div>
            </div>
            

            <div id="about" class="tile bg-color-red outline-color-green icon">
                <div class="tile-content">
                    <i class="icon-info"></i>
                </div>
                
                <div class="brand">
                    <div class="name tile-font-strong">About project</div>
                    <div class="tile-bottom-border"></div>
                </div>
            </div>
            

        </div>
    </div>
</div>
